<template>
  <div>
    <!-- <input v-model="val" type="text">
    <ul>
        <li v-for="(item, index) in list" :key="index">
            {{ item.goods_name }}
        </li>
    </ul> -->

    <!-- <div>
        <input v-model="search" type="text">
        <span @click="search = ''" v-show="flag">X</span>
    </div>

    <button :disabled="dis" class="btn" @click="login">登录</button> -->
    <input v-model="val" type="text">
    <input v-model="val2" type="text">
  </div>
</template>

<script setup>
// watch  侦听器
import axios from 'axios'
import { ref, watch, watchEffect } from 'vue'
const val = ref("")
const val2 = ref("")
const list = ref([])

// watch(val, (query, oldValue) => {
//     axios.get("https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch", {
//         params: {
//             query
//         }
//     }).then(res => {
//         list.value = res.data.message
//     })
// })

// const search = ref("")
// const flag = ref(false)
// const dis = ref(true)
// const login = () => {
//     console.log('准备登录')
// }

// watch(search, (newValue) => {
//     if (newValue.length > 0) {
//         flag.value = true
//         // 正确的手机号
//         if (newValue.length == 11) {
//             dis.value = false
//         } else {
//             dis.value = true
//         }
//     } else {
//         flag.value = false
//         dis.value = true
//     }
// })

// watchEffect 会自动收集依赖 
watchEffect(() => {
    console.log('我是watchEffect', val.value, val2.value)
})
</script>

<style>
.btn {
    width: 90%;
    height: 36px;
    border: none;
    margin-top: 20px;
    border-radius: 10px;
    background: orange;
}
</style>